<template>
  <div>
    <div style="height: 100%; padding: 12px">
      <el-card class="box-card" style="height: 690px">
        <div slot="header" class="clearfix">
          <div class="nav_font">
            <p @click="click_new('DeptManager', '部门管理')">部门管理</p>
          </div>
          <div class="nav_font2">
            <p @click="click_new('UserManager', '用户管理')">用户管理</p>
          </div>
          <div class="nav_font3">
            <p @click="click_new('RoleManager', '角色管理')">角色管理</p>
          </div>
          <div class="nav_font4">
            <p @click="click_new('ModeManager', '模块管理')">模块管理</p>
          </div>
          <div class="nav_font5">
            <p @click="click_new('DeptManager', '分类管理')">分类管理</p>
          </div>
          <div class="nav_font6">
            <p @click="click_new('ConstantManager', '常量管理')">常量管理</p>
          </div>
          <div class="nav_font7">
            <p @click="click_new('SystemManager', '系统日志')">系统日志</p>
          </div>
          <div class="nav_font8">
            <p @click="click_new('PersonalSettings', '个人设置')">个人设置</p>
          </div>
          <div class="nav_font9">
            <p @click="click_new('ParameterSettings', '参数设置')">参数设置</p>
          </div>
          <!-- <div class="head_right">
                        <el-input
                            placeholder="综合查询"
                            class="Input_box"
                            prefix-icon="el-icon-search"
                            v-model="query_words"
                            @change="top_query()"
                        >
                        </el-input>
                        <div class="input-item"></div>
                    </div> -->
        </div>
        <div class="main_class" :is="component"></div>

        <!-- <div class="table_box" style="">
                    <div class="block_bottom">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[8, 16, 24, 32]"
                            :page-size="1"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="this.total"
                        >
                        </el-pagination>
                    </div>
                </div> -->
      </el-card>
    </div>
  </div>
</template>
<script>
import ConstantManager from "../../jd/system_setting/constant_manager.vue";
import DeptManager from "../../jd/system_setting/dept_manager.vue";
import ModeManager from "../../jd/system_setting/mode_manager.vue";
import RoleManager from "../../jd/system_setting/role_manager.vue";
import SystemManager from "../../jd/system_setting/system_manager.vue";
import UserManager from "../../jd/system_setting/user_manager.vue";
import ParameterSettings from "../../jd/system_setting/parameter_manager";
export default {
  components: {
    DeptManager,
    UserManager,
    RoleManager,
    ConstantManager,
    ModeManager,
    SystemManager,
    ParameterSettings,
    PersonalSettings,
  },
  data() {
    return {
      component: "UserManager",
      pathname: "",
    };
  },
  methods: {
    //路径跳转
        click_new(path, pathname) {
            this.pathname = pathname;
            this.component = path;
            //每一次进来都清掉背景色
            $('.nav_font2 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font3 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font4 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font5 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font6 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font7 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font8 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font9 p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            $('.nav_font p').css('cssText', 'color:#fff;background-color:rgb(0,0,0,0)!important');
            //选中的颜色添加背景色
            switch (pathname) {
                case '部门管理': {
                    $('.nav_font p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '用户管理': {
                    $('.nav_font2 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '角色管理': {
                    $('.nav_font3 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '模块管理': {
                    $('.nav_font4 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '分类管理': {
                    $('.nav_font5 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '常量管理': {
                    $('.nav_font6 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '系统日志': {
                    $('.nav_font7 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '个人设置': {
                    $('.nav_font8 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
                case '参数设置': {
                    $('.nav_font9 p').css('cssText', 'color:#fff;background-color:rgb(180 118 17)!important');
                    break;
                }
            }

            //  this.$router.push({
            //         path: '/'+path
            //     })
        },
        changeLayout(type) {
            let $ = this.$;
            if (type === 1) {
                $('.right_box').show();
                $('.left-2').css('cssText', 'position: relative;width: 100%;');
            } else if (type === 2) {
                $('.right_box').hide();
                $('.left-2').css('cssText', 'position: absolute;width: 98%;');
            }
        }
  },
   mounted() {
        this.changeLayout(2);
    },
    destroyed() {
        this.changeLayout(1);
    }
};
</script>
<style lang="less" scoped>
div {
  width: 93.5%;
  height: 100%;
  background-color: rgb(252, 247, 247);
  box-sizing: border-box;
  padding: 5px;
  border-radius: 10px;
}
</style>